@import 'hover';

.lil-gui {
	input {
		-webkit-tap-highlight-color: transparent;
		outline: none;
		font-family: var(--font-family);
		font-size: var(--input-font-size);

		border-radius: var(--widget-border-radius);
		height: var(--widget-height);
		background: var(--widget-color);
		border-width: var(--widget-border-width);
		border-color: var(--widget-border-color);
		border-style: var(--widget-border-style);
		color: var(--text-color);
		width: 100%;
		@include can-hover {
			&:hover {
				background: var(--hover-color);
			}
			&:active {
				background: var(--focus-color);
			}
		}
		&:disabled {
			opacity: 1; // override default iOS style, we already dim .controller
		}
	}

	input[type='text'],
	input[type='number'],
	input[type='password'] {
		padding: var(--widget-padding);
		&:focus {
			background: var(--focus-color);
		}
	}

	// Hide number spinners

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}

	input[type='number'] {
		-moz-appearance: textfield;
	}

	input[type='checkbox'] {
		appearance: none;
		-webkit-appearance: none;
		height: var(--checkbox-size);
		width: var(--checkbox-size);
		border-radius: var(--widget-border-radius);
		text-align: center;
		cursor: pointer;
		&:checked:before {
			font-family: 'lil-gui';
			content: '✓';
			font-size: var(--checkbox-size);
			line-height: var(--checkbox-size);
		}

		@include can-hover {
			&:focus {
				box-shadow: inset 0 0 0 1px var(--focus-color);
			}
		}
	}

	input[type='radio'] {
		appearance: none;
		-webkit-appearance: none;
		height: var(--radio-size);
		width: var(--radio-size);
		border-radius: var(--radio-size);
		text-align: center;
		cursor: pointer;
		&:checked:before {
			font-family: 'lil-gui';
			content: '✓';
			font-size: var(--radio-size);
			line-height: var(--radio-size);
		}

		@include can-hover {
			&:focus {
				box-shadow: inset 0 0 0 1px var(--focus-color);
			}
		}
	}

	button {
		-webkit-tap-highlight-color: transparent;
		outline: none;
		cursor: pointer;

		font-family: var(--font-family);
		font-size: var(--font-size);
		color: var(--text-color);

		width: 100%;
		height: var(--widget-height);

		text-transform: none;

		background: var(--widget-color);
		border-radius: var(--widget-border-radius);

		border: 1px solid var(--widget-color);

		text-align: center;

		line-height: calc(var(--widget-height) - 4px);

		@include can-hover {
			&:hover {
				background: var(--hover-color);
				border-color: var(--hover-color);
			}
			&:focus {
				border-color: var(--focus-color);
			}
		}

		&:active {
			background: var(--focus-color);
		}
	}

	span {
		width: 100%;
		vertical-align: middle;
		text-align: left;
		display: flex;
		align-items: center;
	}

	.objectPicButton {
		width:UNSET;
		margin-left: 10px;
		display: flex;
		align-items: center;
	}

	.objectPicBtn1 {
		width:UNSET;
		margin-left: 10px;
		padding: 0 10px;
		display: flex;
		align-items: center;
	}

	.picImgTag {
		max-width: 33px;
		max-height: 17px;
	}

	.vector{
		width: 33%;
		display: inline-block;
		padding: 1px;
		margin: 1px;
	}
	.optionBtn {
		width:UNSET;
		margin-left: 10px;
		padding: 0 10px;
		display: flex;
		align-items: center;
		z-index: 1;
	}

	textarea{
		-webkit-tap-highlight-color: transparent;
		outline: none;
		font-family: var(--font-family);
		font-size: var(--input-font-size);

		border-radius: var(--widget-border-radius);
		background: var(--widget-color);
		border-width: var(--widget-border-width);
		border-color: var(--widget-border-color);
		color: var(--text-color);
		width: 100%;
		height: 50px;
		padding: var(--widget-padding);
		@include can-hover {
			&:hover {
				background: var(--hover-color);
			}
			&:active {
				background: var(--focus-color);
			}
		}
		&:disabled {
			opacity: 1; // override default iOS style, we already dim .controller
		}
		&:focus {
			background: var(--focus-color);
		}
	}

	.textareaFlexPanel{
		position: absolute;
		top: 5px;
		right: 0px;
		opacity: 0;
		transition: opacity 2s ease-out;
	}

	textarea:hover ~ .textareaFlexPanel {
		opacity: 1;
		transition: opacity 0s ease-in;
	}

	.textareaFlexPanel:hover ~ .textareaFlexItem {
		opacity: 1;
		transition: opacity 0s ease-in;
	}

	.editorFlexPanel{
		position: absolute;
		top: 5px;
		right: 20px;
		z-index: 999;
	}

	.checkboxSpan{
		width: unset;
		padding-left: 5px;
		line-height: 16px;
		text-wrap: nowrap ;
	}

	.booleanMoreCheck{

	}
	.labelp{
		user-select: text;
		line-height: 15px;
		text-align: left;
		word-break: break-all;
	}
	.radioLabel{
		width: unset;
		padding-left: 5px;
		padding-right: 5px;
		line-height: 16px;
	}

	.radioController{
		flex-wrap: wrap;
	}
	.radioInnerSpan{
		width: unset;
		padding: var(--padding-row) 0;
	}

	.lilInlineEndSpan{
		padding-left: 10px;
		width: unset;
	}

	.textNowrap{
		white-space: nowrap;
	}
}
